<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-01-31 10:51:01
 * @LastEditors: Andy
 * @LastEditTime: 2023-02-09 17:17:02
-->
<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch">
      <x-filter-item :label="$t('maintain.logMail.id')">
        <el-input v-model="searchParams.bizId" :placeholder="$t('maintain.logMail.placeHolderId')" clearable></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('maintain.logMail.isSendSuccess')">
        <x-select
          v-model="searchParams.isSuccess"
          :options="dictOptions['system.state']"
          style="width: 100%"
          clearable
          :placeholder="$t('maintain.logMail.placeHolderStatus')"
        ></x-select>
      </x-filter-item>
      <x-filter-item :label="$t('maintain.logMail.sendTime')">
        <el-date-picker
          v-model="searchParams.times"
          clearable
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :range-separator="$t('maintain.logMail.to')"
          :start-placeholder="$t('maintain.logMail.startTime')"
          :end-placeholder="$t('maintain.logMail.endTime')"
        >
        </el-date-picker>
      </x-filter-item>
    </x-filter>
    <!--数据面板-->
    <x-data>
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="end">
          <el-col :span="24" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <!-- 数据表格 -->
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <x-state-cell
              v-if="item.prop === 'isSuccess'"
              :stateClass="scope.row[item.prop] === 0 ? 'gray' : scope.row[item.prop] ? 'success' : ''"
              :text="selectDictLabel(dictOptions['msg_mail_log.is_success'], scope.row[item.prop] + '')"
            />
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions :action-list="actions" :row="scope.row" @onActionClick="handleActions" />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <log-mail-dialog ref="logMailDetail"></log-mail-dialog>
  </x-page>
</template>
<script>
  import { selectDictLabel, TableListMixin, QueryDictMixin } from '@package/utils'
  import LogMailDialog from '../components/logMailDialog.vue'
  // import { TableListMixin, QueryDictMixin } from '@/common/mixins/index.js'
  import { columns, actions } from '../config/logMail.js'
  import { listUrl } from '../api/logMail.js'

  export default {
    name: 'LogMail',
    components: { LogMailDialog },
    mixins: [TableListMixin, QueryDictMixin],
    data() {
      return {
        columns,
        listUrl,
        actions,
        loading: false,
        searchParams: {
          bizId: '',
          isSuccess: '',
          times: [],
          beginTime: '',
          endTime: ''
        },
        dictKeys: ['msg_mail_log.is_success']
      }
    },
    computed: {},
    methods: {
      selectDictLabel,
      handleSearch() {
        this.queryParam = JSON.parse(JSON.stringify(this.searchParams))
        this.queryParam.beginTime = this.queryParam.times ? this.queryParam.times[0] : ''
        this.queryParam.endTime = this.queryParam.times ? this.queryParam.times[1] : ''
        delete this.queryParam.times
        this.loadData()
      },
      handleActions({ key, data }) {
        if (key === 'view') {
          const logInfo = {
            ...data,
            // mailTypeText: this.selectDictLabel(dictOptions['upms_user.user_type'], data.mailType),
            isSuccessText: this.selectDictLabel(dictOptions['msg_mail_log.is_success'], data.isSuccess)
          }
          this.$refs.logMailDetail.handleOpen(logInfo)
        }
      }
    }
  }
</script>
